<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery DOM 操作</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
</head>
<body>
<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>

<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<input id="btn" type="button" value="删除我"/>

<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
    </fieldset>
</form>
<script>
    $('#append').click(function () {
        // 父.append(子)
        // $('#div1').append($('#span'))
        $('#div1').append('<span>哈哈</span>')
    });
    $('#after').click(function () {
        // 哥哥.after(弟弟)
        $('#div2').after($('#div1'));
    });
    $('#empty').click(function () {
        $('#ul').empty();
    });
    $('#remove').click(function () {
        $('#ul').remove();
    });
</script>
</body>
</html>